<div class="container">
    <div class="translation-card">
        <div class="language-selector">
            <div class="row w-100">
                <div class="col-5">
                    <select class="form-select" id="sourceLanguage">
                        <option value="zh">中文</option>
                        <option value="en">英语</option>
                        <option value="ja">日语</option>
                        <option value="ko">韩语</option>
                        <option value="fr">法语</option>
                    </select>
                </div>
                <div class="col-2 text-center">
                    <button class="btn btn-link" id="switchLanguage">
                        <i class="fas fa-exchange-alt"></i>
                    </button>
                </div>
                <div class="col-5">
                    <select class="form-select" id="targetLanguage">
                        <option value="en">英语</option>
                        <option value="zh">中文</option>
                        <option value="ja">日语</option>
                        <option value="ko">韩语</option>
                        <option value="fr">法语</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="translation-input">
            <textarea class="form-control border-0" id="sourceText" rows="4" 
                      placeholder="请输入要翻译的文本"></textarea>
        </div>

        <div class="d-flex justify-content-between mb-3">
            <button class="btn btn-outline-primary action-button" id="clearText">
                <i class="fas fa-times"></i> 清空
            </button>
            <button class="btn btn-primary action-button translate-button">
                <i class="fas fa-language"></i> 翻译
            </button>
        </div>

        <div class="translation-result bg-light p-3 rounded" style="display: none;">
            <div class="result-text mb-3"></div>
            <div class="d-flex justify-content-between">
                <button class="btn btn-outline-secondary btn-sm" id="copyResult">
                    <i class="fas fa-copy"></i> 复制
                </button>
                <button class="btn btn-outline-secondary btn-sm" id="playAudio">
                    <i class="fas fa-volume-up"></i> 播放
                </button>
            </div>
        </div>
    </div>

    <!-- 语音设置面板 -->
    <div class="card mt-3">
        <div class="card-header">
            语音设置
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label class="form-label">语音音色</label>
                <select class="form-select" id="voiceType">
                    <option value="female1">女声1</option>
                    <option value="female2">女声2</option>
                    <option value="male1">男声1</option>
                    <option value="male2">男声2</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">语速调节</label>
                <input type="range" class="form-range" id="speechRate" min="0.5" max="2" step="0.1" value="1">
            </div>
        </div>
    </div>

    <!-- 蓝牙状态指示器 -->
    <div class="position-fixed bottom-0 end-0 m-3">
        <div class="bluetooth-status bluetooth-disconnected">
            <i class="fas fa-bluetooth-b me-2"></i>
            <span>蓝牙未连接</span>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const switchLanguageBtn = document.getElementById('switchLanguage');
    const sourceLanguage = document.getElementById('sourceLanguage');
    const targetLanguage = document.getElementById('targetLanguage');
    const sourceText = document.getElementById('sourceText');
    const clearTextBtn = document.getElementById('clearText');
    const translateBtn = document.querySelector('.translate-button');
    const resultContainer = document.querySelector('.translation-result');
    const copyResultBtn = document.getElementById('copyResult');
    const playAudioBtn = document.getElementById('playAudio');

    // 切换语言
    switchLanguageBtn.addEventListener('click', () => {
        const temp = sourceLanguage.value;
        sourceLanguage.value = targetLanguage.value;
        targetLanguage.value = temp;
    });

    // 清空文本
    clearTextBtn.addEventListener('click', () => {
        sourceText.value = '';
        resultContainer.style.display = 'none';
    });

    // 复制结果
    copyResultBtn.addEventListener('click', () => {
        const resultText = document.querySelector('.result-text').textContent;
        navigator.clipboard.writeText(resultText)
            .then(() => alert('已复制到剪贴板'))
            .catch(err => console.error('复制失败:', err));
    });

    // 播放音频
    playAudioBtn.addEventListener('click', () => {
        const resultText = document.querySelector('.result-text').textContent;
        const voiceType = document.getElementById('voiceType').value;
        const speechRate = document.getElementById('speechRate').value;
        
        // 这里添加文本转语音的实现
        console.log('播放音频:', {
            text: resultText,
            voice: voiceType,
            rate: speechRate
        });
    });
});
</script> 